<template>
  <div>
    <h3>门店修改</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>门店名称</td>
          <td><input type="text" v-model="queryInfo.ShopName" /></td>
        </tr>
        <tr>
          <td>门店电话</td>
          <td>
            <input type="text" v-model="queryInfo.Phone" maxlength="11" />
          </td>
        </tr>
        <tr>
          <td>门店地址</td>
          <td><input type="text" v-model="queryInfo.Adderss" /></td>
        </tr>
        <tr>
          <td>是否启用</td>
          <td>
            <input
              type="radio"
              name="use"
              v-model="queryInfo.State"
              :value="1"
            />是
            <input
              type="radio"
              name="use"
              v-model="queryInfo.State"
              :value="0"
            />否
          </td>
        </tr>
        <tr>
          <td>门店图片</td>
          <td>
            <input type="file" @change="changeImg" />
            <img :src="queryInfo.Photo" width="100" height="100" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-success"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
  
  <script setup lang="ts">
import axios from "axios";
import { onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
//向后端传递的数据
let queryInfo = reactive({
  Id: route.query.Id,
  ShopName: "",
  Phone: "",
  Adderss: "",
  Photo: "",
  State: 1,
});

onMounted(() => {
  getDate();
});

//实现反填
const getDate = () => {
  axios({
    url: "/api/Shop/GetShopItem",
    method: "get",
    params: {
      Id: route.query.Id,
    },
  })
    .then((res) => {
      console.log(res);
      queryInfo.ShopName = res.data.ShopName;
      queryInfo.Adderss = res.data.Adderss;
      queryInfo.Phone = res.data.Phone;
      queryInfo.Photo = res.data.Photo;
      queryInfo.State = res.data.State;
    })

    .catch((err) => {
      console.log(err);
    });
};

//2修改操作
const ok = () => {
  //2.发送网络请求完成填加操作
  axios({
    url: "/api/Shop/UpdateShopOk",
    method: "put",
    data: queryInfo,
  })
    .then((res) => {
      console.log(res);
      if (res.data == 1) {
        alert("修改成功");
        router.push("/shopList");
      } else if (res.data == -1) {
        alert("门店名称重复");
        return;
      } else {
        alert("修改失败");
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//1.上传图片
const changeImg = (e: any) => {
  //将文件转成FormData格式
  var obj = e.target.files[0];
  var f = new FormData();
  f.append("file", obj);
  //发送网络请求完成上传
  axios({
    url: "/api/Commons/UpoadImgs",
    method: "post",
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data.code == -1) {
        alert(res.data.msg);
        return;
      }
      if (res.data.code == -2) {
        alert(res.data.msg);
        return;
      }
      //上传成功   1.成功的图片地址存储  2.预览图片
      queryInfo.Photo = "https://localhost:7291" + res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
  
  <style scoped></style>